<template>
  <div class="img_paste">
    <div class="box" contenteditable />
    <div class="box1" contenteditable />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
document.addEventListener('copy', e => {
    // console.log(e)
    // 阻止复制默认行为
    e.preventDefault()
    // alert('禁止复制')
    navigator.clipboard.writeText('测试复制添加内容')
})
navigator.clipboard.readText().then(text => {
    // navigator.clipboard.writeText(text + '测试')
    (document.querySelector('.box1') as Element).innerHTML = '自动写入复制的内容' + text
})
// 监听粘贴的图片类型
document.addEventListener('paste', e => {
    console.log(e.clipboardData?.files)
    if ((e.clipboardData?.files.length as number) > 0) {
        e.preventDefault()
        const file = e.clipboardData?.files[0]
        const reader = new FileReader()
        reader.onload = e => {
            const img = document.createElement('img')
            img.src = e.target?.result as string
            document.querySelector('.box')?.appendChild(img)
        }
        reader.readAsDataURL(file as File)
    }
})
</script>

<style lang="less" scoped>
.img_paste {
  .box {
    width: 100%;
    height: 500px;
    border: 1px solid gray;
  }
  .box1 {
    width: 200px;
    height: 100px;
    margin-top: 20px;
    border: 1px solid blue;
  }
}
</style>
